<template>
  <a-card @click="() => setVisible(true)" hoverable style="width: 180px">
    <template #cover>
      <img alt="example" :src="headerImg" />
    </template>
    <a-card-meta title="冉建熊">
      <template #description>Java后端开发工程师</template>
    </a-card-meta>
  </a-card>
  <a-image
    :width="200"
    :style="{ display: 'none' }"
    :preview="{
      visible,
      onVisibleChange: setVisible,
    }"
    :src="headerImg"
  />
</template>

<script setup>
import headerImg from "@/assets/personImage.jpg";
import { ref } from "vue";

const visible = ref(false);
const setVisible = (value) => {
  visible.value = value;
};
</script>

<style scoped></style>
